<template>
	<view class="store-list">
		<view class="store-item"  v-for="(item,index) in activityList" :key="index" @click="goDetail(item)">
			<image class="store-image" :src="$util.img(item.goods_image)" mode="aspectFill" lazy-load/>
			<view class="store-info">
				<view class="text-bold ellipsis-2" style="line-height: 1.4;" v-if="!pageType">{{item.goods_name}}</view>
				<view class="text-bold ellipsis-2" style="height: 78rpx;line-height: 1.4;" v-else>{{item.goods_name}}</view>
				<block v-if="!pageType">
					<view class="font-26 c-78 flex-y-center" v-if="!activityType">
						<i class="iconfont m-r-10" style="color: #788096;font-size: 30rpx;">&#xebb1;</i>
						{{item.week}} {{item.date}} {{item.start_time}} - {{item.end_time}}
					</view>
					<view v-else style="height: 30rpx;"></view>
					<view class=" flex-y-center ">
						<i class="iconfont m-r-10" style="color: #788096;font-size: 30rpx;">&#xe601;</i>
						<view class="ellipsis font-24 c-78" style="widthL:80%">{{item.full_address}} {{item.address}}</view>
					</view>
				</block>
				<block v-else>
					<view class="flex m-b-10">
						<view class="m-r-10" 
							v-for="(tag,tagindex) in item.goods_label" 
							:key="tagindex"
							:class="{'tags1': tagindex % 2 === 0, 'tags3': tagindex % 2 !== 0}"
						>{{tag}}</view>
					</view>
				</block>
				<block v-if="!activityType">
					<view class="flex-y-center">
						<view class="font-24 c-78" >已预约：{{item.total_people_num}}人</view>
						<view class="font-24 c-a4 flex-y-center m-r-24 m-l-40" style="width: 20%" v-if="showPing">
							<text class="iconfont m-r-4">&#xe614;</text>{{item.comment_num}}
						</view>
						<view class="font-24 c-a4 flex-y-center" v-if="showPing">
							<text class="iconfont m-r-4">&#xe615;</text>{{item.zan_num}}
						</view>
					</view>
				</block>
				<view class="flex-between m-t-10">
					<view class="flex-y-center">
						<view class="font-32 c-origin flex-y-baseline text-bold" v-if="parseFloat(item.price) > 0">
							<text class="font-20">¥</text>{{item.price}}
						</view>
						<view class="c-origin text-bold" v-else>
							免费
						</view>
						<!-- <text v-if="item.status == 1&&!pageType" class="font-24 c-89 m-l-10">已结束</text> -->
					</view>
					<block v-if="!pageType">
						<view class="make" v-if="item.status == 1" style="background: #999;">报名结束</view>
						<view class="make" v-else>立即预约</view>
					</block>
					<block v-else>
						<view class="make" >立即购买</view>
					</block>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	// status   0正常 1已结束
	export default {
		name:"activity",
		props: {
			activityList: {
				type: Array,
				default() {
					return []
				}
			},
			activityType: {
				type: String,
				default: '',  //activityType:course  代表儿童成长里面的模块
			},
			pageType: {
				type: String,
				default: '',    //goods代表商品   其他代表活动
			},
			showPing: {
				type: Boolean,
				default: false,    //是否显示活动下面的评论、点赞数-社区模块可以看到

			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			goDetail(item) {
				if(this.pageType == 'goods') {
					this.$util.redirectTo('/otherpages/social/goodsDetail?id='+item.goods_id+'&activityType='+this.activityType)
				}else {
					if(item.status == 1) return
					this.$util.redirectTo('/otherpages/social/activityDetail?id='+item.goods_id+'&activityType='+this.activityType)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.store-list {
	.store-item {
		position: relative;
		margin: 24rpx 24rpx 0;
		padding: 24rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		
		.store-image {
			width: 216rpx;
			height: 216rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}
		
		.store-info {
			width: 64%;
		}
		
	}
	.make {
		width: 139rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		background-color: $color-title2;
		color: #fff;
		font-size: 24rpx;
		border-radius: 60rpx;
	}
}

.tags1 {
	font-size: 20rpx;
	color: #FF6619;
	border-radius: 10rpx;
	background: #FBEDE6;
	padding: 0 10rpx;
}
.tags2 {
	font-size: 20rpx;
	color: #0C7EFF;
	border-radius: 10rpx;
	background: #E6F2FF;
	padding: 0 10rpx;
}
.tags3 {
	font-size: 20rpx;
	color: #00B867;
	border-radius: 10rpx;
	background: #E6FAF1;
	padding: 0 10rpx;
}


  .iconfont  {
  	  font-size: 24rpx;
  }
</style>